<ion-modal-view id="choose-fee-level" ng-controller="feeLevelsController">
  <ion-header-bar align-title="center" class="bar-royal">
    <div class="title">
      {{'Bitcoin Network Fee Policy'|translate}}
    </div>
    <button
      ng-disabled="customFeePerKB && !customSatPerByte.value"
      class="button button-clear" ng-click="ok()" translate>
      OK
    </button>
  </ion-header-bar>
  <ion-content>
    <div class="box-notification warning" ng-if="network!='livenet'">
      Testnet
    </div>
    <div class="row selected-fee-level" ng-show="feeLevel">
      <div class="col time" ng-if="!customFeePerKB">
        <div class="value">
          <span ng-if="avgConfirmationTime">
            {{avgConfirmationTime | amDurationFormat: 'minute'}}
          </span>
          <span ng-if="loadingFee">...</span>
        </div>
        <span translate>Average confirmation time</span>
      </div>
      <div class="col rate" ng-class="{'separator': !customFeePerKB}">
        <div ng-if="!customFeePerKB">
          <div class="value">
            <span ng-if="feePerSatByte && !loadingFee">
              {{feePerSatByte}} sat/byte
            </span>
            <span ng-if="loadingFee">...</span>
          </div>
          <span translate>Current fee rate for this policy</span>
        </div>
        <div ng-if="customFeePerKB">
          <div class="list">
            <label class="item item-input">
              <input
              type="number"
              placeholder="{{'Enter custom fee'|translate}}"
              ng-min="minFeeAllowed"
              ng-max="maxFeeAllowed"
              min="minFeeRecommended"
              max="maxFeeRecommended"
              ng-change="checkFees(customSatPerByte.value)"
              ng-model="customSatPerByte.value"
              ng-required="customFeePerKB">
              <span class="unit">sat/byte</span>
            </label>
          </div>
          <div class="error-fee">
            <div ng-if="showError">
              <i class="icon ion-close-circled"></i>
              <span translate>
                Transactions without fee are not supported.
              </span>
            </div>
            <div ng-if="showMinWarning || showMaxWarning">
              <i class="icon ion-alert-circled"></i>
              <span ng-if="showMinWarning" translate>
                Your fee is lower than recommended.
              </span>
              <span ng-if="showMaxWarning" translate>
                You should not set a fee higher than {{maxFeeRecommended}} satoshis/byte.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list" ng-show="feeLevel">
      <label class="item item-input item-select">
        <div class="input-label" translate>
          Fee level
        </div>
        <select ng-options="fee as level | translate for (fee,level) in feeOpts" ng-model="selectedFee.value">
        </select>
      </label>
    </div>

  </ion-content>
</ion-modal-view>
